<template>
  <layout title="checkbox多选框">
    <layout-content title="基础使用">
      <tn-checkbox-group v-model="basicCheckbox">
        <tn-checkbox name="1">选项一</tn-checkbox>
        <tn-checkbox name="2" disabled>选项二</tn-checkbox>
        <tn-checkbox name="3">选项三</tn-checkbox>
      </tn-checkbox-group>
    </layout-content>

    <layout-content title="默认选中">
      <tn-checkbox-group v-model="defaultCheckbox">
        <tn-checkbox :name="1">选项一</tn-checkbox>
        <tn-checkbox :name="2">选项二</tn-checkbox>
        <tn-checkbox :name="3">选项三</tn-checkbox>
      </tn-checkbox-group>
    </layout-content>

    <layout-content title="修改尺寸">
      <tn-checkbox-group size="sm" v-model="basicCheckbox">
        <tn-checkbox name="1">选项1</tn-checkbox>
        <tn-checkbox name="2">选项2</tn-checkbox>
        <tn-checkbox name="3">选项3</tn-checkbox>
      </tn-checkbox-group>
      <view class="tn-margin-top-sm">
        <tn-checkbox-group v-model="basicCheckbox">
          <tn-checkbox name="1">选项1</tn-checkbox>
          <tn-checkbox name="2">选项2</tn-checkbox>
          <tn-checkbox name="3">选项3</tn-checkbox>
        </tn-checkbox-group>
      </view>
      <view class="tn-margin-top-sm">
        <tn-checkbox-group size="lg" v-model="basicCheckbox">
          <tn-checkbox name="1">选项1</tn-checkbox>
          <tn-checkbox name="2">选项2</tn-checkbox>
          <tn-checkbox name="3">选项3</tn-checkbox>
        </tn-checkbox-group>
      </view>
      <view class="tn-margin-top-sm">
        <tn-checkbox-group size="xl" v-model="basicCheckbox">
          <tn-checkbox name="1">选项1</tn-checkbox>
          <tn-checkbox name="2">选项2</tn-checkbox>
          <tn-checkbox name="3">选项3</tn-checkbox>
        </tn-checkbox-group>
      </view>
    </layout-content>

    <layout-content title="禁止点击标签">
      <tn-checkbox-group v-model="basicCheckbox" disabled-label>
        <tn-checkbox name="1">选项1</tn-checkbox>
        <tn-checkbox name="2">选项2</tn-checkbox>
        <tn-checkbox name="3">选项3</tn-checkbox>
      </tn-checkbox-group>
    </layout-content>

    <layout-content title="换行显示">
      <tn-checkbox-group v-model="basicCheckbox" wrap>
        <tn-checkbox name="1">选项1</tn-checkbox>
        <tn-checkbox name="2">选项2</tn-checkbox>
        <tn-checkbox name="3">选项3</tn-checkbox>
      </tn-checkbox-group>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-checkbox-group v-model="basicCheckbox" active-color="tn-bg-blue">
        <tn-checkbox name="1">选项1</tn-checkbox>
        <tn-checkbox name="2">选项2</tn-checkbox>
        <tn-checkbox name="3">选项3</tn-checkbox>
      </tn-checkbox-group>
      <view class="tn-margin-top-sm">
        <tn-checkbox-group v-model="basicCheckbox">
          <tn-checkbox name="1" active-color="tn-bg-red">选项1</tn-checkbox>
          <tn-checkbox name="2" active-color="tn-bg-blue">选项2</tn-checkbox>
          <tn-checkbox name="3" active-color="tn-bg-green">选项3</tn-checkbox>
        </tn-checkbox-group>
      </view>
    </layout-content>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnCheckbox from '@/tuniao-ui/components/tn-checkbox/src/Checkbox.vue'
import TnCheckboxGroup from '@/tuniao-ui/components/tn-checkbox/src/CheckboxGroup.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// checkbox选项值
let basicCheckbox = ref<string[]>([])
let defaultCheckbox = ref<number[]>([1,2])
</script>

<style lang="scss" scoped>
</style>
